<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例1</title>
    <style>
         #txt1{
              color: deepskyblue;
              font-size: 12px;
         }
         #box1 img{
             border-radius:50%;
             width: 50px;
             height: 50px;
         }
         #txt2{
             color: deepskyblue;
             font-size: 12px;
         }
        #box2{
            text-align: center;
            color: white;
            font-size: 10px;
            background-color:#33a4d9;
            width: 30px;
            height: 15px;
            border-radius: 5px;
            margin-top: 5px;
        }
         #txt3{
             color: deepskyblue;
             font-size: 12px;
         }
         #box3{
             text-align: center;
             color: white;
             font-size: 10px;
             background-color:#33a4d9;
             width: 30px;
             height: 15px;
             border-top-left-radius:0;
             border-top-right-radius:5px;
             border-bottom-right-radius:5px;
             border-bottom-left-radius:0px;
             margin-top: 5px;
         }
         #txt4{
             color: deepskyblue;
             font-size: 12px;
         }
         #box4{
             width: 5px;
             height: 20px;
             border: 1px solid black;
             background-color: gray;
             border-radius: 10px  0 0 10px;
         }
         #box5{
             width: 5px;
             height: 20px;
             border: 1px solid black;
             background-color: gray;
             border-radius: 0  10px 10px 0;
         }
        ul li {
            list-style: none;
            float: left;
        }
        li{
            margin: 1px;
        }
         #txt5{
             clear: both;
             color: deepskyblue;
             font-size: 12px;
         }
         #box6{
             color: white;
             font-size: 12px;
             margin-top: 5px;
             width: 100px;
             height: 60px;
             background-color: aqua;
             /*
             第一个参数：阴影水平方向的位置
             第二个参数：阴影垂直方向的位置
             第三个参数：阴影模糊半径
             第四个参数：阴影的颜色
             */
             /*box-shadow: 10px 20px 5px 10px red;*/
             box-shadow: 10px 20px 5px gray;
         }

    </style>
</head>
<body>
<div id="txt1">圆形</div>
<div id="box1"><img src="img/1.jpg" /></div>

<div id="txt2">圆角</div>
<div id="box2">圆角</div>

<div id="txt3">右上角，右下角圆角&&左上角，左下角直角</div>
<div id="box3">圆角</div>

<div id="txt4">边框背景</div>
<div id="box">
    <ul>
        <li id="box4"></li>
        <li>边框背景</li>
        <li ID="box5"></li>
    </ul>
</div>

<div id="txt5">盒子阴影</div>
<div id="box6">
    盒子阴影
</div>




</body>
</html>